<script setup lang="ts">
import { ref, onMounted } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
import Option from './views/Option.vue'
import SetupFun from './views/SetupFun.vue'
import SetupTang from './views/SetupTang.vue'
import LeftMenu from './components/test/LeftMenu.vue'
import UserManage from './components/test/UserManage.vue'

const setupRef = ref(null);

onMounted(() => {
    // console.log('setupRef', setupRef)
    // setupRef.value.myMethodFun();

    
})

</script>

<template>
    <!-- <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header> -->

    <!-- <main>
    <TheWelcome />
  </main> -->
    <!-- <Option></Option> -->
    <!-- <br /><br /><br /><br /> -->
    <div style="display:block">
        <!-- <SetupFun ref="setupRef" name="bal" age="15" test="{a:1,b:2}" @emitFun="() => { console.log('emitFun') }" />
        <SetupTang name="testbla"></SetupTang> -->
    </div>
    <div class="content-box">
        <div class="header">我是头部</div>
        <div class="content">
            <div class="left-menu">
                <LeftMenu/>
            </div>
            <div class="right-cont"><UserManage/></div>
        </div>
    </div>
</template>

<style scoped>
.content-box {
    border:1px solid red;
    width: 100%;
    height: 100%;
}
.header {
    line-height: 1.5;
}
.content {
    display:flex;
    width: 100%;
    height: 100%;
}
.left-menu {
    width: 230px;
    border: green;
}

.right-cont {
    border: yellow;
    width: 100%;
}
.logo {
    display: block;
    margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
    header {
        display: flex;
        place-items: center;
        padding-right: calc(var(--section-gap) / 2);
    }

    .logo {
        margin: 0 2rem 0 0;
    }

    header .wrapper {
        display: flex;
        place-items: flex-start;
        flex-wrap: wrap;
    }
}
</style>
